<template>
  <div class="wrapper">
    <text class="userVipPhone_title">请填写真实姓名和手机号码</text>
    <div class="userVipPhone_warn">
      <text class="userVipPhone_icon userVipPhone_warn_icon">&#xe632;</text>
      <text class="userVipPhone_remind">发放奖励时，系统会验证您的真实姓名和微信实名认证是否一致，如果不一致将会导致奖励无法发放！</text>
    </div>
    <div class="userVipPhone_info">
      <div class="userVipPhone_info_show userVipPhone_info_name">
        <text class="userVipPhone_icon userVipPhone_info_icon">&#xe60f;</text>
        <input type="text" placeholder="请输入真实姓名" class="userVipPhone_info_input" :autofocus=true value="" @change="onchange" @input="oninput"/>
      </div>
      <div class="userVipPhone_info_show userVipPhone_info_phone">
        <text class="userVipPhone_icon userVipPhone_info_icon">&#xe617;</text>
        <input type="tel" placeholder="请输入手机号码" class="userVipPhone_info_input" @change="onchange" @input="oninput"/>
      </div>
    </div>
    <a href="http://192.168.1.59:8081/web/preview.html?page=index.js" class="userVipPhone_button">
      <text class="userVipPhone_button_text">修改</text>
    </a>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld'
  import user_top from './components/user_top'
  import user_reward from './components/user_reward'
  import user_month from './components/user_month'
  export default {
    name: 'App',
    components: {
      HelloWorld,
      user_top,
      user_reward,
      user_month,
    },
    data () {
      return {
        logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png',
      }
    }
  }
</script>

<style scoped>
  .wrapper {justify-content: center;align-items: center;}
  .scroller {width: 750px;height: 1182px;/*border-width:1px;border-style: solid;border-color: red;*/  }
  .logo {width: 424px;height: 200px;}
  .greeting {text-align: center;margin-top: 70px;font-size: 50px;color: #41B883;color:red;}
  .message {margin: 30px;font-size: 32px;color: red;text-align: center;}
  /*提示信息部分*/
  .userVipPhone_title{font-size: 40px;margin-bottom: 40px;}
  .userVipPhone_warn{flex-direction: row;align-items: flex-start;justify-content: space-between;width: 700px;}
  .userVipPhone_icon{font-family: iconfont2;color: #7D7D7D;font-size: 50px;}
  .userVipPhone_remind{width: 650px;color: #7D7D7D;line-height: 70px;}
  /*输入信息部分*/
  .userVipPhone_info{width: 700px;}
  .userVipPhone_info_show{flex-direction: row;align-items: center;justify-content: space-between;border-width:1px;border-style: solid;border-color: #7D7D7D;width: 700px;height: 115px;margin-bottom: 50px;border-radius: 10px;background-color: #EBEBE4;}
  .userVipPhone_info_icon{margin-left: 15px;}
  .userVipPhone_info_input{width: 615px;height: 85px;background-color: #EBEBE4;}
  .userVipPhone_button{flex-direction: row;align-items: center;justify-content: center;width: 700px;height: 115px;background-color: #DC7009;border-radius: 10px;}
  .userVipPhone_button_text{color: #fff;}
</style>
<script>
module.exports = {
  data: function () {
    return {
      txtInput: '',
      txtChange: '',
      txtReturnType: '',
      txtSelection:'',
      autofocus: false
    };
  },
  beforeCreate: function () {
    var domModule = weex.requireModule("dom");
    domModule.addRule('fontFace', {
      'fontFamily': "iconfont2",
      'src': "url('http://at.alicdn.com/t/font_475407_agvgdhxied0zr529.ttf')"
    });
  },
  methods: {
    ready: function () {
      var self = this;
      setTimeout(function () {
        self.autofocus = true;
      }, 1000);
    },
    onchange: function (event) {
      this.txtChange = event.value;
      console.log('onchange', event.value);
    },
    onreturn: function (event) {
      this.txtReturnType = event.returnKeyType;
      console.log('onreturn', event.type);
    },
    oninput: function (event) {
      this.txtInput = event.value;
      console.log('oninput', event.value);
    },
    focus: function () {
      this.$refs['input1'].focus();
    },
    blur: function () {
      this.$refs['input1'].blur();
    },
    setRange: function() {
      console.log(this.$refs["inputselection"]);
      this.$refs["inputselection"].setSelectionRange(2, 6);
    },
    getSelectionRange: function() {
      console.log(this.$refs["inputselection"]);
      var self = this;
      this.$refs["inputselection"].getSelectionRange(function(e) {
        self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
      });
    }
  }
}
</script>